<template>
  <el-dialog title="选择商品" v-model="visibleOffShelfCombo" width="45%" append-to-body>
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <div class="position-box">
          <el-checkbox-group v-model="comboList" @change="handleSelectionChange">
            <el-checkbox :label="item.comboId" v-for="(item,index) in comboStatistics" :key="index">
              {{item.comboName + '*'+ item.comboNum}}
            </el-checkbox>
          </el-checkbox-group> 
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visibleOffShelfCombo = false">取 消</el-button>
        <el-button type="primary" :loading="loadingSubmit" @click="confirmSelected">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { formatDate , formatDate1 } from '@/utils/index'
import { ElMessage ,ElMessageBox} from 'element-plus'
import { reactive, watch, onMounted, nextTick } from 'vue'
import { getComboRoadInfo ,offShelfComboRoad } from '@/api/devote'


const emit = defineEmits(['updateList'])
const { proxy } = getCurrentInstance()
const loadingSubmit = ref(false)

//** 货道餐品信息  */
const roadList = ref([])
function getComboRoadData(cplanId) {
  getComboRoadInfo(cplanId).then((res) => {
    roadList.value = res?.data ?? [];
    comboRoadConversion(roadList.value)
  })
}

//餐品统计
const comboStatistics = ref(null)
function comboRoadConversion(receiveData) {
  const resultMap = {}
  receiveData.forEach((obj) => {
    const comboId = obj.comboId
    const comboNum = parseInt(obj.comboNum)

    if (comboId in resultMap) {
      const num = parseInt(resultMap[comboId].comboNum)
      resultMap[comboId].comboNum = num + comboNum
    } else {
      resultMap[comboId] = obj
    }
  })
  comboStatistics.value = Object.values(resultMap)
}

//** 选择套餐 */
const visibleOffShelfCombo = ref(false)
const comboList = ref([])
const selected = ref([])
const handleSelectionChange = (val) => {
  selected.value = val
}
const confirmSelected = () => {
  if (selected.value.length == 0) return
  comboList.value = selected.value
  const comboNames = comboList.value.reduce((acc, id) => {
    const obj = comboStatistics.value.find((item) => item.comboId === id)
    if (obj) {
      acc.push(obj.comboName)
    }
    return acc
  }, [])
  const names = comboNames.map((obj) => `【${obj}】`).join('，')
  const params = {
    cPlanId: comboPlanData.value.cplanId,
    comboList: comboList.value.map((ele) => {
      return { comboId: ele }
    })
  }
  loadingSubmit.value = true
  ElMessageBox.confirm('确认要下架商品' + names + '吗?', '系统提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    center: false
  })
    .then(() => {
      offShelfComboRoad(params).then(() => {
        emit('updateList')
        ElMessage.success('下架成功')
        visibleOffShelfCombo.value = false
      })
    })
    .catch(() => {
      loadingSubmit.value = false
    })
}

const comboPlanData = ref(null)
function handleAddFileColumn(data) {
  loadingSubmit.value = false
  comboList.value = []
  comboPlanData.value = data
  getComboRoadData(data.cplanId)
  visibleOffShelfCombo.value = true
}

defineExpose({
  handleAddFileColumn
})
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .input-box {
    width: 80%;
  }
}
:deep(.el-radio) {
  width: 100%;
}
.position-box {
  background-color: #f2f2f2;
  width: 100%;
  min-height: 300px;
  max-height: 600px;
  padding: 8px;
  overflow-y: scroll;
  overflow-x: hidden;
}
</style>
